<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
        <el-form :inline="true" :model="search">
          <el-form-item label="帐户余额">
            <span class="priceAccount">{{userInfo.account | toFixed}}欧元</span>
          </el-form-item>
          <el-form-item label="国家">
            <el-select v-model="search.country" placeholder="请选择">
              <el-option :label="item.countryName+('(+'+item.dialingPrefix+')')" :value="item.countryCode" v-for="(item,index) in countriesList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="功能">
            <el-select v-model="search.features" placeholder="请选择">
              <el-option label="短信" value="SMS"></el-option>
              <el-option label="语音" value="VOICE"></el-option>
              <el-option label="语音&短信" value="SMS,VOICE"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="类别">
            <el-select v-model="search.type" placeholder="请选择">
              <el-option label="固话" value="landline"></el-option>
              <el-option label="免费电话" value="landline-toll-free"></el-option>
              <el-option label="手机" value="mobile-lvn"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="号码">
            <el-input v-model="search.pattern" type="text" placeholder="请选择号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="_list">
      <el-table highlight-current-row @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column label="" width="20">
        </el-table-column>
        <el-table-column label="号码" width="200">
          <template slot-scope="scope">
           (+{{scope.row.dialingPrefix}}) {{scope.row.msisdn}} <br> {{scope.row.currencyName}}
          </template>
        </el-table-column>
        <el-table-column label="功能">
          <template slot-scope="scope">
            {{scope.row.features.length>1 ?'语音&短信': scope.row.features[0] === 'VOICE'? '语音': '短信' }}
          </template>
        </el-table-column>
        <el-table-column label="类别">
          <template slot-scope="scope">
            {{scope.row.type.indexOf('mobile') > -1 ?'手机': scope.row.type.indexOf('free') > -1 ? '免费电话': '固话' }}
          </template>
        </el-table-column>
        <el-table-column label="月租成本">
          <template slot-scope="scope">
            {{parseFloat(scope.row.cost)}}欧元/月
          </template>
        </el-table-column>
        <el-table-column label="月租价格">
          <template slot-scope="scope">
            {{parseFloat(scope.row.monthPrice)}}欧元/月
          </template>
        </el-table-column>
        <el-table-column label="通话成本">
          <template slot-scope="scope">
            <div class="in_out_Price">
              <span class="name">呼入</span>
              <span class="price">{{scope.row.inPriceCost}}欧元/分 <i @click="callOut(scope.row)">呼出</i></span>
            </div>
          </template>
        </el-table-column>
         <el-table-column label="通话价格">
          <template slot-scope="scope">
            <div class="in_out_Price">
              <span class="name">呼入</span>
              <span class="price">{{scope.row.inPrice}}欧元/分 <i @click="callOut(scope.row)">呼出</i></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
              <el-button type="text" @click="buyNumber(scope.row)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChange" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="购买" :visible.sync="dialogVisible" width="430px" top="5vh">
       <el-form ref="dialogForm" :model="form" label-width="110px">
         <el-form-item style="margin-bottom:10px">
          <div class="buyNumber"> (+{{buyInfo.dialingPrefix}}) {{buyInfo.msisdn}}</div>
        </el-form-item>
        <el-form-item>
          <div class="pos">{{buyInfo.currencyName}}</div>
        </el-form-item>
        <el-form-item style="margin-bottom:10px">
          <span class="cost">月租成本: {{buyInfo.cost}}欧元/月</span>
        </el-form-item>
        <el-form-item style="margin-bottom:10px">
          通话成本: 呼入{{buyInfo.inPriceCost}}欧元/分
        </el-form-item>
        <el-form-item style="margin-bottom:10px">
          通话价格: 呼入{{buyInfo.inPrice}}欧元/分
        </el-form-item>
        <el-form-item style="margin-top:20px;">
          <el-button size="medium" type="primary" @click="Submit" :loading="isLoading" style="margin-left:46px;">{{isLoading?'购买中':'确 定'}}</el-button>
        </el-form-item>
        <div style="height:30px;"></div>
      </el-form>
    </el-dialog>
    <el-dialog :title="countryName+'呼出价格列表'" :visible.sync="CallListdialogVisible" width="650px" top="5vh">
      <el-form :inline="true">
          <el-form-item label="">
            <el-input v-model="countryCode" type="text" placeholder="请输入国家代码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleCallCurrentChange(1)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <div class="importExcel">
              <el-button class="btnExcel" type="success">导入</el-button>
              <input type="file" class="fileExcel" ref="fileExcel" @change="importExcel($event.target)" />
            </div>
          </el-form-item>
        </el-form>
      <el-table highlight-current-row :data="callCountryList" style="width: 100%" v-loading="callListLoading">
        <el-table-column label="国家代码">
          <template slot-scope="scope">
            {{scope.row.countryCode}}
          </template>
        </el-table-column>
        <el-table-column label="国家名称">
          <template slot-scope="scope">
            {{scope.row.countryName}}
          </template>
        </el-table-column>
        <el-table-column label="呼出" align="center" width="300">
          <template slot-scope="scope">
            <div class="inPriceCost">
              <span>固话: {{scope.row.telOutPrice}}欧元/分</span>
              <span>手机: {{scope.row.mobileOutPrice}}欧元/分</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
       <div class="pages">
        <div class="right">
          <el-pagination @current-change="handleCallCurrentChange" background :current-page.sync="callPage" layout="total, prev, pager, next" :total="callTotal">
          </el-pagination>
        </div>
      </div>
      <div style="height:20px;"></div>
    </el-dialog>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
import { mapGetters } from 'vuex';
export default {
  name: 'buyphone',
  mixins: [mixinsTable],
  data() {
    return {
      form: {},
      iScallOut: false,
      countryName: '',
      callListLoading: false,
      callTotal: 0,
      countryCode: '',
      callPage: 1,
      callCountryList: [],
      CallListdialogVisible: false,
      search: {
        country: 'US',
        features: 'VOICE',
        type: 'mobile-lvn',
        pattern: '',
        size: '10',
        index: 0,
        search_pattern: 1
      },
      buyInfo: {},
      account: 0.00,
      countriesList: [],
      rows: {
        dialingPrefix: '',
        msisdn: '',
        currencyName: ''
      },
      isLoading: false
    };
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created() {
    this.$API.countryList({}).then((res) => {
      this.countriesList = res.data;
    });
    this.getnumberList(this.search);
  },
  methods: {
    callOut(row) {
      this.servicePath = '/nexmo/priceout';
      this.countryName = row.currencyName;
      this.CallListdialogVisible = true;
      this.rows.msisdn = row.msisdn;
      this.getCallCountryList({ page: 1, msisdn: row.msisdn });
      this.iScallOut = true;
    },
    importExcel(obj) {
      if (!this.numberId) {
        this.$message.warning('没有获取到号码');
        return;
      }
      let file = obj.files[0];
      let types = file.name.split('.')[1];
      let fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types);
      if (!fileType) {
        this.$message.warning('格式错误！请重新选择');
        return;
      }
      this.callListLoading = true;
      var files = new FormData();
      files.append('file', file);
      files.append('price', 'priceout');
      files.append('_id', this.numberId);
      this.$API.importExcel(files).then((data) => {
        if (data.code === 200) {
          this.getCallCountryList({ page: 1 });
          this.callListLoading = false;
          this.$message.success('导入成功!');
        }
        this.$refs.fileExcel.value = '';
      }).catch((err) => {
        if (err) {
          this.callListLoading = false;
          this.$refs.fileExcel.value = '';
        }
      });
    },
    handleCallCurrentChange(val) {
      this.getCallCountryList({ page: val, countryCode: this.countryCode, msisdn: this.rows.msisdn });
    },
    getCallCountryList(query) {
      this.callListLoading = true;
      this.$API.callOutList(query).then((res) => {
        this.callCountryList = res.data.result;
        this.callTotal = res.data.total;
        this.callListLoading = false;
      }).catch((err) => {
        if (err) {
          this.callListLoading = false;
        }
      });
    },
    Submit() {
      this.isLoading = true;
      this.$API.numberBuy(this.buyInfo).then((res) => {
        if (res) {
          this.$message.success('购买成功');
        }
        this.dialogVisible = false;
      }).catch((err) => {
        if (err) {
          this.isLoading = false;
        }
      });
    },
    getnumberList(query) {
      this.listLoading = true;
      this.$API.numberList(query).then((res) => {
        this.dataList = res.data.result;
        this.total = res.data.total;
        this.account = res.data.account;
        this.listLoading = false;
      }).catch((err) => {
        if (err) {
          this.listLoading = false;
        }
      });
    },
    buyNumber(row) {
      this.dialogVisible = true;
      this.buyInfo = row;
    },
    searchSubmit() {
      this.getnumberList(this.search);
    },
    handleCurrentChange(val) {
      this.search.index = val;
      this.getnumberList(this.search);
    }
  }
};
</script>
<style lang="scss">
.priceAccount{
  color:red;
  font-size:14px;
  margin-right: 50px;
}
.buyNumber{
  font-size:20px;
  color:#333;
}
.importExcel{
  position: relative;
  .btnExcel{
    position: absolute;
    left:0;
    right: 0;
  }
  .fileExcel{
    opacity: 0;
    width:56px;
    height: 32px;
    z-index: 999;
    vertical-align: top;
    cursor: pointer;
  }
}
.pos{
  font-size:18px;
}
.cost{
  font-size:16px;
}
.in_out_Price{
  .name{
    color: #666;
    display: block;
  }
  .price{
    text-align: left;
    color:#666;
    i{
      color:red;
      margin-left:15px;
      font-style: normal;
    }
  }
}
</style>
